<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Animated Responsive Image Grid</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
        <meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/fallback.css" />
		</noscript>
		<!--[if lt IE 9]>
			<link rel="stylesheet" type="text/css" href="css/fallback.css" />
		<![endif]-->
    </head>
    <body>
    	<div class="container">
			
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox
                </a>
                <span class="right">
					<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
                    <a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			
			<header class="codrops-header">
			
				<h1>Animated Responsive Image Grid</h1>
				<h2>Cycling through a set of images in a responsive grid.</h2>
				
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
					<a href="index5.html">Demo 5</a>
				</nav>

			</header>
			
			<section class="main">

				<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
					<img class="ri-loading-image" src="images/loading.gif"/>
					<ul>
						<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
						<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
					</ul>
				</div>
				
				<p class="codrops-info"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching </p>
				
			</section>
			
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
		<script type="text/javascript">	
			$(function() {
			
				$( '#ri-grid' ).gridrotator( {
					w320 : {
						rows : 3,
						columns : 4
					},
					w240 : {
						rows : 3,
						columns : 3
					}
				} );
			
			});
		</script>
    </body>
</html>